/**
 * Detail Screen
 *
 * @format
 * @flow
 */

import React from 'react';
import { View, Text , TouchableOpacity, StyleSheet} from 'react-native';

class DetailScreen extends React.Component {
  static navigationOptions = {
    title: "Detail Screen 。。。"
  };

  render() {
    const navigation = this.props.navigation;
    return (
      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center', backgroundColor: 'cyan' }}>
        <Text>Details Screen</Text>
        <TouchableOpacity style={styles.button} activeOpacity={0.5} onPress={() => navigation.push('DetailScreen') }>
          <Text>navigation.push('Details')</Text>
          <Text style={{color: 'orange'}}>Go to Details... again</Text>
        </TouchableOpacity>
        <TouchableOpacity style={styles.button} activeOpacity={0.5} onPress={() => navigation.goBack() }>
          <Text>navigation.goBack()</Text>
          <Text style={{color: 'orange'}}>Go Back</Text>
        </TouchableOpacity>
        <TouchableOpacity style={styles.button} activeOpacity={0.5} onPress={() => navigation.popToTop() }>
          <Text>navigation.popToTop()</Text>
          <Text style={{color: 'orange'}}>Go to Home(一)</Text>
        </TouchableOpacity>
        <TouchableOpacity style={styles.button} activeOpacity={0.5} onPress={() => navigation.navigate('HomeScreen') }>
          <Text>navigation.navigate('HomeScreen')</Text>
          <Text style={{color: 'orange'}}>Go to Home(二)</Text>
        </TouchableOpacity>
      </View>
    );
  }
}


const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: 'white',
  },
  button: {
    marginTop: 30,
    padding: 5,
    borderWidth: 1,
    borderRadius: 5,
    borderColor: 'orange',
    alignItems: 'center',
    justifyContent: 'center',
  }
});

export default DetailScreen;